---
layout: default
title: Pagination plugin
---

    <h2>Pagination plugin</h2>

    <p style="padding:20px; background-color:#ffdbdb; border:solid 1px #ffb8b8;">Note: The pagination plugin is deprecated since v1.5.0, it's now <a href="/docs/pagination">bundled into</a> List.js.</p>

    <p>To use the plugin you first need to download it:</p>

    <h4>Via <a href="https://github.com/javve/list.pagination.js">GitHub</a></h4>
    <a href="https://raw.githubusercontent.com/javve/list.pagination.js/v0.1.1/dist/list.pagination.min.js" class="btn btn-primary">Download List.pagination.js</a>

    <h4>Via <a href="https://github.com/bower/bower">Bower</a></h4>
    <pre><code>bower install list.pagination.js</code></pre>

    <h4>Via <a href="https://cdnjs.com/">CDNJS</a></h4>
    <pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js">&lt;/script></code></pre>

<h3>Basic example</h3>
<pre><code>&lt;div id="listId">
  &lt;ul class="list">
      // A bunch of items
  &lt;/ul>
  &lt;ul class="pagination">&lt;/ul>
&lt;/div>

&lt;script>
  var options = {
    valueNames: [ 'name', 'category' ],
    page: 3,
    plugins: [
      ListPagination({})
    ]
  };

  var listObj = new List('listId', options);
&lt;/script>
</code></pre>



    <h3>Options</h3>
    <ul>
      <li>
        <strong>name</strong> <em class="docs-parameter-description">String, default: &ldquo;pagination&rdquo;</em><br/>
        Default option for all plugins. Defines how to access the plugin from the list object <code>listObj.pluginName</code>.
      </li>
      <li>
        <strong>paginationClass</strong> <em class="docs-parameter-description">String, default: &ldquo;pagination&rdquo;</em><br/>
        The class that defines which <code>ul</code> that should contain the pagination (must be inside the list container)
      </li>
      <li>
        <strong>innerWindow</strong> <em class="docs-parameter-description">Int, default: 2</em><br/>
        How many pages should be visible on each side of the current page.<br/>
        <code>innerWindow: 2 &hellip; 3 4 <strong>5</strong> 6 7 &hellip;</code><br/>
        <code>innerWindow: 1 &hellip; 4 <strong>5</strong> 6 &hellip;</code>
      </li>
      <li>
        <strong>outerWindow</strong> <em class="docs-parameter-description">Int, default: 0</em><br/>
        How many pages should be visible on from the beginning and from the end of the pagination.<br/>
        <code>outerWindow: 0 &hellip; 3 4 <strong>5</strong> 6 7&hellip;</code><br/>
        <code>outerWindow: 2 1 2 &hellip; 4 5 <strong>6</strong> 7 8 &hellip; 11 12</code>
      </li>
      <li>
        <strong>left</strong> <em class="docs-parameter-description">Int, default: 0</em><br/>
        Same as <code>outerWindow</code> but only from left.
        <code>outerWindow: 2</code> and <code>left: 1</code> <code>1 &hellip; 4 5 <strong>6</strong> 7 8 &hellip; 11 12</code>
      </li>
      <li>
        <strong>right</strong> <em class="docs-parameter-description">Int, default: 0</em><br/>
        Same as <code>left</code> but from right.
      </li>
    </ul>

    <h4>Notice</h4>
    <p>The number of items at each page are decided by the List.js own property page. To set this just add page: Number to the option object sent into the List.js constructor (as been done in both of the examples at this page).</p>

    <h3>Generated output</h3>

<pre><code>&lt;div id="listId">
  &lt;ul class="list">
      / A bunch of items /
  &lt;/ul>
  &lt;ul class="pagination">
    &lt;li>
      &lt;a class="page active" href="javascript:function Z(){Z=&quot;&quot;}Z()">1&lt;/a>
    &lt;/li>
    &lt;li>
      &lt;a class="page" href="javascript:function Z(){Z=&quot;&quot;}Z()">2&lt;/a>
    &lt;/li>
    &lt;li>
      …
    &lt;/li>
  &lt;/ul>
&lt;/div>
</code></pre>

    <h3>Double pagination</h3>

<pre><code>&lt;div id="listId">
  &lt;ul class="paginationTop">&lt;/ul>
  &lt;ul class="list">
    // A bunch of items
  &lt;/ul>
  &lt;ul class="paginationBottom">&lt;/ul>
&lt;/div>

&lt;script>
  var paginationTopOptions = {
    name: "paginationTop",
    paginationClass: "paginationTop",
    outerWindow: 2
  };
  var paginationBottomOptions = {
    name: "paginationBottom",
    paginationClass: "paginationBottom",
    innerWindow: 3,
    left: 2,
    right: 4
  };
  var listOptions = {
    valueNames: [ 'name', 'category' ],
    page: 3,
    plugins: [
        ListPagination(paginationTopOptions),
        ListPagination(paginationBottomOptions)
    ]
  };

  var listObj = new List('listId', listOptions);
&lt;/script></code></pre>

    <div class="continue">Next topic: <a href="/docs/plugins/fuzzysearch">Fuzzy search plugin ›</a></div>
